<template>
  <div class="main_con">
    <div class="conleft">
      <div class="descname">
        <li
          ref="listyle"
          v-for="(item, index) in list"
          :key="index"
          @click="selectshow(index)"
        >
          {{ item }}
        </li>
      </div>
    </div>
    <div class="conright">
      <div class="descbox" :class="{ showact: shownum === 0 || shownum === 3 }">
        <div class="boxaa" ref="pieChart"></div>
        <!-- 饼图 -->
      </div>
      <div class="bilibox" :class="{ showact: shownum === 1 || shownum === 2 }">
        <div class="bilibox1" ref="barChart"></div>
        <!-- 柱状图 -->
      </div>
    </div>
  </div>
</template>

<script setup>
import axios from "axios";
import { ref, onMounted } from "vue";
import * as echarts from "echarts";

const list = ref([
  "进口的贸易伙伴金额占比",
  "进口贸易伙伴排序",
  "出口贸易伙伴排序",
  "出口的贸易伙伴金额占比",
]);
const namedesc = ref([]); // 进口贸易伙伴排序
const namemoney = ref([]); // 进口的贸易伙伴金额占比
const shownum = ref(0);
const listyle = ref();
const barChart = ref(null);
const pieChart = ref(null);

const selectshow = async (index) => {
  shownum.value = index;
  listyle.value.forEach((item) => {
    item.classList.remove("active");
  });
  event.target.classList.add("active");

  if (index === 0) {
    const resj = await axios.get(`http://127.0.0.1:5000/api/data/jingkoubili`);
    namemoney.value = resj.data.slice(0, 10);
    console.log(namemoney.value);
    renderPieChart(); // 显示饼图
  } else if (index === 1) {
    const ordresj = await axios.get(
      `http://127.0.0.1:5000/api/data/orderjingkou`
    );
    ordresj.data.sort((a, b) => b.value - a.value);
    namedesc.value = ordresj.data;
    console.log(namedesc.value);
    renderBarChart(); // 显示柱状图
  } else if (index === 2) {
    const ordresj = await axios.get(
      `http://127.0.0.1:5000/api/data/orderchukou`
    );
    // 将ordresj的data按value进行从高到底排序
    ordresj.data.sort((a, b) => b.value - a.value);
    namedesc.value = ordresj.data;
    console.log(namedesc.value);
    renderBarChart(); // 显示柱状图
  } else if (index === 3) {
    const resj = await axios.get(`http://127.0.0.1:5000/api/data/chukoubili`);
    namemoney.value = resj.data.slice(0, 10);
    console.log(namemoney.value);
    renderPieChart(); // 显示饼图
  }
};

const renderBarChart = () => {
  const chart = echarts.init(barChart.value);
  const option = {
    xAxis: {
      type: "category",
      data: namedesc.value.map((item) => item.name),
      axisLabel: {
        interval: 0,
        rotate: 45,
      },
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: namedesc.value.map((item) => item.value),
        type: "bar",
        itemStyle: {
          color: "#5c5af1",
        },
      },
    ],
  };
  chart.setOption(option);
};

const renderPieChart = () => {
  const chart = echarts.init(pieChart.value);
  const option = {
    series: [
      {
        name:
          shownum.value === 0
            ? "进口的贸易伙伴金额占比"
            : "出口的贸易伙伴金额占比",
        type: "pie",
        radius: "50%",
        data: namemoney.value.map((item) => ({
          name: item.name,
          value: item.value,
        })),
        itemStyle: {
          color: (params) => {
            const colorList = [
              "#5c5af1",
              "#ff7f50",
              "#87cefa",
              "#da70d6",
              "#32cd32",
              "#6495ed",
              "#ff69b4",
              "#ba55d3",
              "#cd5c5c",
              "#ffa500",
            ];
            return colorList[params.dataIndex];
          },
        },
        label: {
          show: true,
          formatter: "{b}: {c}",
          fontSize: 14, // 调整字体大小
          color: "#fff", // 调整字体颜色
        },
        labelLine: {
          show: true,
        },
      },
    ],
  };
  chart.setOption(option);
};

onMounted(async () => {
  try {
    const resj = await axios.get(`http://127.0.0.1:5000/api/data/jingkoubili`);
    namemoney.value = resj.data.slice(0, 10);
    console.log(namemoney.value);
    renderPieChart(); // 默认显示饼图
  } catch (error) {
    console.error("Failed to fetch namemuboy data:", error);
  }
});
</script>

<style scoped>
.main_con {
  width: 100%;
  height: 100%;
  display: flex;
}
.conleft {
  flex: 1;
  height: 100%;
}
.conright {
  flex: 8;
  margin-left: 10px;
  border: 1px solid #5c5af1;
  height: 100%;
}
.descname li {
  color: #fff;
  list-style: none;
  padding: 20px 0 20px;
  border-bottom: 0;
  cursor: pointer;
}

.active {
  background-color: #fff;
  color: black !important;
  margin-left: 10px;
  transition: all 0.7s;
}
.descbox {
  display: none;
  width: 100%;
  height: 100%;
}
.bilibox {
  display: none;
  width: 100%;
  height: 100%;
}
.showact {
  display: block;
}
.boxaa,
.bilibox1 {
  width: 100%;
  height: 100%;
}
</style>
